import React, { useEffect, useState } from 'react'
import {
  Popover, Button, Modal, Form, Input, Select,
  Row,
  Col,
  Card,
  Checkbox,
  InputNumber,
  Avatar,
  Tag,
  Tabs
} from 'antd';
import { UserOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import PatientHeadDetails from "../components/PatientHeadDetails"
import './index.less'
import Calender from "./calender"
const { Option } = Select;
export default function DoctorScheduling() {


  const onChange = (e) => {
    console.log(`checked = ${e.target.checked}`);
  }
  const handleChange = (value) => {
    console.log(`selected ${value}`);
  }

  return (
    <div className='doctorScheduling'>
      <div className='header-user-name'>
        <Row>
          <Col span={3} push={21}>
            <div className='user-name-box'>
              <span> 大川 智之</span>
              <Avatar size={40} icon={<UserOutlined />} style={{ marginRight: "20px" }} />
            </div>

          </Col>
        </Row>
      </div>
      <div className='calender-scheduling'>
        <h3>
          予約枠
        </h3>
        <div className="scheduling-content">

          <div className='calender-box'>
            <Calender></Calender>
          </div>
          <div className="scheduling-list-box">
            <div className="scheduling-list" >

              {["大川 智之", "石田 健史", "小柳 拓真 "].map(item => (
                <div className='scheduling-checkbox-list'>
                  <Checkbox onChange={onChange}>
                    <Avatar size={28} icon={<UserOutlined />} style={{ marginRight: "10px" }} />
                    <span style={{ marginRight: "10px" }}>{item}</span>
                    {
                      ["内科", "小児科", "耳鼻いんこう科"].map(tagItem => (
                        <Tag >{tagItem} </Tag>
                      ))
                    }

                  </Checkbox>
                </div>

              ))}


            </div>
            <div className="scheduling-list" >
              <div className='scheduling-list-cont' >
                <div className='scheduling-list-label'> 診療科 </div>
                <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="disabled" disabled>
                    Disabled
                  </Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
              </div>
              <div className='scheduling-list-cont' >
                <div className='scheduling-list-label' > 受付締め切り時間* </div>
                <InputNumber  addonAfter="分前" style={{width:120}} max={60} defaultValue={0} />
              </div>
              <div className='scheduling-list-cont' >
              <div className='scheduling-list-label' > 1 枠時間* </div>
                <InputNumber  addonAfter="分" style={{width:120}} max={60} defaultValue={0} />
              </div>

            </div>

          </div>
        </div>

      </div>

    </div>
  )
}
